/*
 * 品牌视图
 * @Author: yudong
 * @Date: 2018-04-19 17:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-04-16 09:51:09
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-customer-product-brand-views {
        padding: 20px;
	}
	@deep: ~'>>>';
	@{deep} .ivu-modal-body{
		min-height: 200px;
	}

</style>

<template>

	<div class="v-customer-product-brand-views">

		<Tabs
			type="card"
			@on-click="changeTab">

			<TabPane
				:label="$t('common.create')"
				name="新增">

				<brand-create
					ref="create"
					@post="postData"/>

			</TabPane>

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<!-- 搜索组件 -->
				<!-- <search-form  @search="confirmSearch" :brand-types="brand_types"></search-form> -->

				<brand-index
					:loading="table_loading"
					:brands="brands.data"
					@edit="brandDetail"
					@delete="deleteBrand"
					@sort="confirmSearch"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="brands.total"
						:current="brands.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('brand.update_brand')"
			class-name="vertical-middle-modal">

			<!-- 品牌编辑组件 -->
			<brand-edit
				v-if="show_modal"
				:brand-detail="brand_detail"
				:show-modal="show_modal"
				@update="updateBrand"/>

			<div slot="footer"/>

		</Modal>

	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';
import { mapMutations } from 'vuex';
import qs from 'qs';

import brandCreate from './create';
import brandIndex from './index';
import brandEdit from './edit';
// import searchForm from './search-form';

export default {
	name: 'BrandViews',
	components: {
		brandCreate,

		brandIndex,

		brandEdit,

		// searchForm
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				sort_column: '',

				sort_by: '',
			},

			// search_info: {

			// 	page: 1,

			// 	per_page: 20,

			// }, // 分页信息

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹框的控制

			brand_detail: {}, // 品牌详情

			brands: {}, // 品牌列表

		};
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined}
         */
		changeTab(tab_name) {
			if (tab_name === '查看') {
				this.fetchBrandList(this.query_info);
			} else {
				this.brands = [];
			}
		},

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.query_info.page = pageNumber;

			// this.query_info.per_page = this.query_info.per_page;


			this.fetchBrandList(this.query_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			// this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchBrandList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			sort_column, sort_by,
		}) {
			this.query_info.sort_by = sort_by,

			this.query_info.sort_column = sort_column;

			this.query_info.page = 1,


			// this.search_info = JSON.parse(JSON.stringify(this.param));


			this.fetchBrandList(this.query_info);
		},

		/**
         * 新增品牌的post数据
		 * @param {Object} param {新增表单参数对象}
         * @return {undefined}
         */
		postData(param) {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.post(API_LIST.CUST_BRAND, param)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');

					this.registerRefresh();
				})
				.catch((err) => {
					this.$Message.error(err.message);
				})
				.then(this.closeSpin);
		},

		/**
         * 查看品牌详情
         * @param  {string} id {合作伙伴的id}
         * @return {undefined}
         */
		brandDetail(brand) {
			this.brand_detail = brand;

			this.show_modal = true;
		},

		/**
         * 更新品牌信息
         * @param  {Object} param {需要更新的参数对象}
         * @return {undefined}
         */
		updateBrand(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.CUST_BRAND}/${id}`, param)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchBrandList(this.query_info);

					this.registerRefresh();
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 删除品牌
         * @param  {string} id {需要删除的品牌的id}
         * @return {undefined}
         */
		deleteBrand(id) {
			this.$Modal.confirm({

				title: this.$t('brand.is_delete'),

				content: this.$t('brand.delete_tips'),

				onOk: () => {
					const param = {
						_method: 'DELETE',
					};

					this.table_loading = true;

					this.$http.post(`${API_LIST.CUST_BRAND}/${id}`, param)
						.then(({ data }) => {
							if (Number(data.code) !== 0) throw new Error(data.error);

							this.fetchBrandList(this.query_info);

							this.$Message.success(this.$t('common.delete_success'));

							this.registerRefresh();
						})
						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})
						.then(() => { this.table_loading = false; });
				},

				onCancel: () => {},
			});
		},

		/**
         * 获取品牌列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchBrandList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUST_BRAND}?${query_str}`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.brands = data.brands;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

		/**
		 * 登记更改了材质数据, 产品页面根据记录来判断是否需要刷新
		 */
		registerRefresh() {
			if (window.opener) {
				window.opener.sessionStorage.setItem('added-data', 'true');
			}
		},
	},


};
</script>
